<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <meta name="Description" content="小逗">
    <meta name="Keywords" content="小逗">
    <title>小逗页面</title>
    <link rel="stylesheet" href="css/style.css">
  </head>
  <body>
    <div class="container">
      <header>
         <hgroup>
           <h1>我是主标题</h1>
           <h2>我是副标题</h2>
         </hgroup>
         <p>
           我是副标题我是副标题我是副标题我是副标题我是副标题我是副标题我是副标题我是副标题我是副标题我是副标题
           我是副标题我是副标题我是副标题我是副标题我是副标题我是副标题我是副标题
         </p>

      </header>
      <div class="navbar-header">
        <button class="navbar-toggle" id="navbar-toggle" >   <!-- onclick="navbar_click()" -->
          <span></span>
          <span></span>
          <span></span>
        </button>
      </div> 
      <nav id="nav" style="display: none">
        <ul>
          <li><a href="index.html"> 主页 </a></li>
          <li><a href="index.html"> 产品 </a></li>
          <li><a href="index.html"> 项目 </a>
            <ul>
              <li><a href="index.html">Node.js</a></li>
              <li><a href="index.html">three.js</a></li>
              <li><a href="index.html">CQRS.js</a></li>
            </ul>
          </li>
          <li><a href="index.html"> 关于我们 </a></li>
        </ul>
      </nav>
      <div class="main">
         <section class="product-list">
            <h1> 产品展示 </h1>
            <div class="product">
               <h4> 产品名称 </h4>
               <img src="img/p.jpg" alt="">
               <p> 产品描述 </p>
            </div></section>
         <section>

         </section>
      </div>

      
    </div>

    <footer>
		<div class="footer-container">
			<div class="footer-link">
				<a href="">百度</a>
				<a href="">CSDN</a>
			</div>

			<div class="footer-copyright">
				<p>京 ICP 证 09002463 号|Copyright © 1999-2018, CSDN.NET, All Rights Reserved</p>
			</div>
		</div>
      </footer>

      <script type="text/javascript">
         const pdom = document.querySelector(".product");
         const productListDom = document.querySelector(".product-list");

         for(let i=0;i<20;i++){
            productListDom.insertAdjacentHTML("beforeEnd", pdom.outerHTML);
         }

         

         window.onresize = myFun();
          function myFun(){
            var offset_width = document.body.offsetWidth;
            if(offset_width >= 800){
                // alert('pc');
            }else{
              // alert('手机');
              // const nav_toggle = document.getElementById("navbar-toggle");
              // const nav = document.querySelector('nav');
              // const nav_a = document.querySelector('.container > nav > ul > li > ul a');
            }
          }

          
          // function navbar_click(){
             
          //    var nav_display = document.getElementById("nav").style.display;
          //       // alert(nav_display);

          //       if (nav_display == "none" || nav_display == ''){
          //           document.getElementById("nav").style.display = "block";
          //       }else{
          //          document.getElementById("nav").style.display = "none";
          //       }
             
          // }


          document.getElementById("navbar-toggle").addEventListener("click",function(){
              var nav_display = document.getElementById("nav").style.display;
                // alert(nav_display);

                if (nav_display == "none" || nav_display == ''){
                    document.getElementById("nav").style.display = "block";
                }else{
                   document.getElementById("nav").style.display = "none";
                }
               
             });



      </script>
  </body>
</html>
